<!DOCTYPE html>
<html>
	<head>
		<title>Lui | Examples</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/semantic.css">
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="css/semantic.js"></script>
	</head>
	<body>
		<br>
		<div class="ui text container">
			<div class="row">
				<div class="sixteen wide column">
					<div class="ui grid">
						<div class="row">
							<div class="eight wide column lui-header">
								<h1>Lui - language of UI</h1>
							</div>
							<div class="eight wide column">
								<p style="text-align: right">
									powered by
									<i class="ui huge python icon"></i>
									<i class="ui huge empire icon"></i>
									<i class="ui huge github icon"></i>
								</p>
							</div>
						</div>
						<div class="row">
							<div class="sixteen wide column">
								<hr style="margin: 0px 0px">
							</div>
						</div>
						<div class="row">
							<div class="sixteen wide column">
                                <p style="text-align: center">Examples of using <u>lui</u> language</p>
							</div>
						</div>
						<div class="row">
							<div class="sixteen wide column">
								<hr style="margin: 0px 0px">
							</div>
						</div>
					</div>
				</div>
			</div>
			<br>
            <div class="row">
                <div class="sixteen wide column">
                    <p align="right"><a href="index.html">go back</a></p>
                </div>
            </div>
            <br>
			<div class="row">
				<div class="sixteen wide column">
                    <div class="ui accordion">
                        <div class="active title">
                            <i class="dropdown icon"></i>
                            1. Hello, Lui
                        </div>
                        <div class="active content">
                            <div class="ui blue segment">
<pre>
    Window {
        title: "Hello Lui example"

        Label {
            caption: "Hello, Lui"
        }
    }
</pre>
                            </div>
                        </div>
                        <div class="title">
                            <i class="dropdown icon"></i>
                            2. Bind vars
                        </div>
                        <div class="content">
                            <div class="ui blue segment">
<pre>
    win_caption = "Window app"
    label_caption = "Bind vars example"

    #LUI

    Window {
        title: win_caption

        Label {
            caption: label_caption
        }
    }
</pre>
                            </div>
                        </div>
                        <div class="title">
                            <i class="dropdown icon"></i>
                            3. Bind lists
                        </div>
                        <div class="content">
                            <div class="ui blue segment">
<pre>
    lst = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

    #LUI

    Window {
        title: "Bind list example"

        Label {
            caption: "My list"
        }

	List {
	    data: lst
	}

    }
</pre>
                            </div>
                        </div>
                    </div>
				</div>
			</div>
		</div>

        <script type="text/javascript">

            $('.ui.accordion').accordion();

        </script>

	</body>
</html>
